<template>
	<view class="pt10 pb30 pr15 pl15">
		<u-navbar :titleWidth="300" title="车辆检测鉴定报告" :z-index="999999"></u-navbar>
		<view class="" v-if="header_img != ''">
			<image :src="header_img" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="mt10" >
			<view id="getwh">
				<view class="pos-rel" v-if="banner != ''">
					<u-upload :show-progress="false" :deletable="false" :file-list="banner" width="140" height="140"
						:max-count="banner.length"></u-upload>
				</view>
				<view v-else>
					<view class="u-flex u-flex-wrap" v-if="carImg.length > 0">
						<view class="pos-rel" v-for="img in carImg" :key="index">
							<u-upload :show-progress="false" :deletable="false" :file-list="img" width="140" height="140"
								:max-count="1" ></u-upload>
							<view class="u-flex u-row-center u-font-24">
								{{ img[0].name.length > 6 ? img[0].name.substring(0,6) + "..." : img[0].name }}
							</view>
						</view>
					</view>
				</view>
				
				<view class="text mt10 mb10 br5 p15" style="background-color: #FDF6EC;">
					{{gong_list}}
				</view>
				<view class="mt10 pos-rel" style="border: 2rpx solid #4CAEEA;">
					<view class=" wd100 fw600 center c-fff"
						style="height: 80rpx;line-height: 80rpx;text-indent: 10rpx;background-color: #00aeff;">
						车辆基本信息
					</view>
					<view class="wd100 fs10 dis-flex fw600 center"
						style="height: 90rpx;line-height: 90rpx;border-bottom: 2rpx solid #4CAEEA;">
						<view class="" style="width: 20%;">
							牌照号码
						</view>
						<view class=""
							style="border-right: 2rpx solid #4CAEEA;border-left: 2rpx solid #4CAEEA;width: 30%;">
							{{car_num}}
						</view>
						<view class="" style="border-right: 2rpx solid #4CAEEA;width: 20%;">
							品牌型号
						</view>
						<view class=" " style="width: 30%;">
							{{brand}}
						</view>
					</view>
					<view class="wd100 fs10 fw600 center dis-flex flex-align-center"
						style="border-bottom: 2rpx solid #4CAEEA;height: 90rpx;">
						<view class="" style="width: 20%;">
							发动机型号
						</view>
						<view class="  dis-flex flex-align-center"
							style="border-right: 2rpx solid #4CAEEA;border-left: 2rpx solid #4CAEEA;width: 30%;height: 90rpx;">
							<view class=" ellipsis-2" style="width: 200rpx;">
								{{engine}}
							</view>
						</view>
						<view class="" style="border-right: 2rpx solid #4CAEEA;width: 20%;height: 90rpx;line-height: 90rpx;">
							VIN码
						</view>
						<view class=" dis-flex flex-align-center" style="width: 30%;height: 90rpx;">
							<view class=" ellipsis-2" style="width: 200rpx;">
								{{vin_number}}
							</view>
						</view>
						
					</view>
					<view class="wd100 fs10 dis-flex fw600 center" style="height: 90rpx;line-height: 90rpx;">
						<view class="" style="width: 20%;">
							制造日期
						</view>
						<view class=" "
							style="border-right: 2rpx solid #4CAEEA;border-left: 2rpx solid #4CAEEA;width: 30%;">
							{{make_date}}
						</view>
						<view class="" style="border-right: 2rpx solid #4CAEEA;width: 20%;">
							表显里程
						</view>
						<view class=" " style="width: 30%;">
							{{mileage}}公里
						</view>
					</view>
				</view>

				<view class="mt10 pos-rel" style="border: 2rpx solid #4CAEEA;">
					<view class=" wd100 fw600 center c-fff"
						style="height: 80rpx;line-height: 80rpx;text-indent: 10rpx;background-color: #00aeff;">
						备注
					</view>
					<view class="wd100 fs10 dis-flex fw600 center"
						style="height: 90rpx;line-height: 90rpx;border-bottom: 2rpx solid #4CAEEA;">
						<view class="dis-flex flex-align-center " style="width: 18%;line-height: 28rpx;padding-left: 10rpx;padding-right: 10rpx;">
							<view class="" @click="gojcbz(1)">
								<image src="../../static/shigu.png" mode="" style="width: 24rpx;height: 24rpx;"></image>是否重大事故车
								<u-icon name="question-circle"></u-icon>
							</view>
						</view>
						<view class=" "
							style="border-right: 2rpx solid #4CAEEA;border-left: 2rpx solid #4CAEEA;width: 15%;">
							{{is_shigu}}
						</view>
						<view class="dis-flex flex-align-center" style="border-right: 2rpx solid #4CAEEA;width: 18%;line-height: 28rpx;padding-left: 14rpx;padding-right: 14rpx;">
							<view class="" @click="gojcbz(2)">
								<image src="../../static/shui.png" mode="" style="width: 24rpx;height: 24rpx;"></image>是否水泡车
								<u-icon name="question-circle"></u-icon>
							</view>
						</view>
						<view class=" " style="border-right: 2rpx solid #4CAEEA;width: 15%;">
							{{is_paoshui}}
						</view>
						<view class="dis-flex flex-align-center" style="border-right: 2rpx solid #4CAEEA;width: 18%;line-height: 28rpx;padding-left: 14rpx;padding-right: 14rpx;">
							<view class="" @click="gojcbz(3)">
								<image src="../../static/huo.png" mode="" style="width: 24rpx;height: 24rpx;"></image>是否火烧车
								<u-icon name="question-circle"></u-icon>
							</view>
						</view>
						<view class=" " style="width: 15%;">
							{{is_huoshao}}
						</view>
					</view>
					<view class="wd100 fs10 dis-flex fw600 center flex-align-center">
						<view class=" pt10 pb10" style="width: 18%;height: 100%;">
							备注
						</view>
						<view class="	  p15" style="border-left: 2rpx solid #4CAEEA;width: 82%;">
							{{result}}
						</view>
					</view>
				</view>

				
				<view class="pos-rel mt10" style="">
					<u-collapse hover-class="none" :item-style="itemStyle">
						
						
						<!-- #ifdef H5 -->
						<u-collapse-item :open="1"  @change="zhanshi" :is_baogao="1" :title="xuanxiang_title(item1)"
							v-for="(item1, index1) in list" :key="index1">
						
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<u-collapse-item :open="item1.open"  @change="zhanshi" :is_baogao="1" :title="xuanxiang_title(item1)"
							v-for="(item1, index1) in list" :key="index1">
						
						<!-- #endif -->
					
							<view class="mb15">
								<!-- bd-dd -->
								<view class=" br5 pl10 pr10  mt10"  :style="item.is_fault == 0 ? 'width: 50%!important;display: inline-block;vertical-align: top;' : ''" v-for="(item,index) in item1.list"
									:key="index">
									<view @click="godakai(index1,index,item.is_fault)" class="dis-flex flex-between"
										style="padding: 20rpx 0;">
									
										<!-- <view class="wd60 ellipsis">{{index+1}}.<text class="ml5">{{item.name}}</text>
										</view> -->
										
										<view class=" ellipsis-2" style="display: inline-flex;text-align: left;"><span>{{index+1}}.</span><span class="ml5">{{item.name}}</span>
										</view>
										<view class=" dis-flex flex-end" v-if="item.is_fault == 2">
											<text class="mr3">受限不可检</text><u-icon name="minus-circle-fill" color="#FFCD42" size="44"></u-icon>
										</view>
										<view class=" dis-flex flex-end" v-if="item.is_fault == 1">
											<text class="mr3">异常</text><u-icon name="info-circle-fill" color="#eb0000" size="44"></u-icon>
										</view>
										<view class=" dis-flex flex-end c-999" v-if="item.is_fault == 0">
											<!-- <text class="mr3" v-if="item1.name == '事故车检测'">未见事故痕迹</text>
											<text class="mr3" v-else-if="item1.name == '水泡车检测'">未见泡水痕迹</text>
											<text class="mr3" v-else-if="item1.name == '火烧车检测'">未见火烧痕迹</text>
											<text class="mr3" v-else>未见明显异常</text> -->
											<u-icon name="checkmark-circle-fill" color="green" size="44"></u-icon>
										</view>
										
									</view>
									<view class="mt10 mb10 pl15 pr15" v-if="item.show">
										<view  v-if="it.is_fault == 1"
										 v-for="(it,index2) in item.abnormal" :key="index2"
											class="dis-flex flex-align-center flex-between mb10" style="height: 90rpx;">
											<view class="wd90">{{it.name}}</view>
											<view class="wd10 dis-flex flex-end" v-if="it.is_fault || it.is_fault == 1">
												<u-icon name="checkmark-circle-fill" color="#eb0000" size="44"></u-icon>
											</view>
											<view class="wd10 dis-flex flex-end" v-else>
												<u-icon name="checkmark-circle-fill" color="#f1f1f1" size="44"></u-icon>
											</view>
										</view>
										<view class="mt20" v-if="item.is_fault == 1">
											<u-upload :show-progress="false" :deletable="false"
												:file-list="item.fault_imgs" width="140" height="140"
												:max-count="item.fault_imgs.length"></u-upload>
										</view>
									</view>
								</view>
							</view>
						</u-collapse-item>
						
					</u-collapse>
				</view>
				<view class=" mt60 fs14" v-if="status == 2">
					 	<view class="dis-flex flex-between">
					 		<view class="pos-rel">
					 			机动车鉴定检测师:(盖章)
								<view class="pos-abs" style="right:80rpx">
									<image :src="zhang" mode="widthFix" style="width: 150rpx;"></image>
								</view>
					 		</view>
							<view class="pos-rel">
								机动车鉴定机构:(盖章)
								<view class="pos-abs" style="right:80rpx">
									<image :src="chapter" mode="widthFix" style="width: 150rpx;"></image>
								</view>
							</view>
					 	</view>
						
						<view class=" dis-flex flex-end" style="margin-top: 150rpx;">
							鉴定日期：<text class="bb">{{year}}</text>年<text>{{moth}}</text>月<text>{{day}}</text>日
						</view>
				</view>
				<view class="mt60 pos-rel" v-if="bottom_img != ''">
					<image :src="bottom_img" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
			<zmmWatermark margin="200" rotate="-50" watermark="一检验车" maxWidth="100" :forLength="forLength">
			</zmmWatermark>
		</view>
		<u-popup v-model="popupShow" mode="center"  border-radius="14" width="60%" z-index="99999999999" :closeable="true" >
			<view class="p20 ">
				<view class="center fs16">{{popupTitle}}</view>
				<view class="mt15 c-666" style="word-wrap: break-word;">{{popupContent}}</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import zmmWatermark from '@/components/zmm-watermark/index.vue';
	export default {
		components: {
			zmmWatermark
		},
		data() {
			return {
				popupShow:false,
				popupTitle:'',
				popupContent:'',
				oid: '',
				list: [],
				checkid: '',
				banner: [],
				car_num: "", //牌照号码
				brand: "", //车辆型号
				engine: "", //发动机型号
				vin_number: "", //VIN码
				make_date: "", //制造年月
				mileage: "", //表里里程
				name: "", //车辆所有人
				phone: "", //联系电话
				use_model: "", //使用性质
				is_shigu: "", //是否为事故车
				is_paoshui: "", //是否泡水车
				is_huoshao: "", //是否火烧车
				result: "", //鉴定结论
				itemStyle: {
					borderBottom: '2rpx solid #d1d1d1'
				},
				forLength: 40,
				gong_list: '',
				bottom_img: '',
				header_img:'',
				title: '',
				year:'-',
				moth:'-',
				day:'-',
				status:'',
				chapter:'',//公章
				zhang:'',//个人章
				data:[],
				carImg:[],
			}
		},

		onLoad(e) {
			this.oid = e.oid
			this.init()
			this.baogaocontent()
			this.jiben()
			this.diimg()
			//#ifdef MP-WEIXIN

			uni.showShareMenu()
			//#endif

		},
		methods: {
			baogaocontent() {
				this.$http.post(this.$config.UrlPostyemei, {}).then((res) => {
					if (res.status == 1) {

						this.gong_list = res.data
					}
				})
			},
			diimg() {
				var json={
					oid:this.oid
				}
				this.$http.post(this.$config.UrlPostimagesList, json).then((res) => {
					if (res.status == 1) {
						this.bottom_img = res.data.footer
						this.header_img = res.data.header
						this.chapter = res.data.chapter
						this.zhang = res.data.zhang
						
					}
				})
			},
			jiben() {
				var json = {
					oid: this.oid
				}
				Promise.all([this.$http.post(this.$config.UrlPostreportInfo, json), this.$http.get(this.$config.UrlPostdeleteText)]).then(([res, img_text])=>{
					if (res.status == 1 && res.data) {
						this.car_num = res.data.car_num //牌照号码
						this.brand = res.data.brand //车辆型号
						this.engine = res.data.engine //发动机型号
						this.vin_number = res.data.vin_number //VIN码
						this.make_date = res.data.make_date //制造年月
						this.mileage = res.data.mileage //表里里程
						this.name = res.data.name //车辆所有人
						this.phone = res.data.phone //联系电话
						this.use_model = res.data.use_model //使用性质
						this.is_shigu = res.data.is_shigu //是否为事故车
						this.is_paoshui = res.data.is_paoshui //是否泡水车
						this.is_huoshao = res.data.is_huoshao //是否火烧车
						this.result = res.data.result //鉴定结论
						this.status = res.data.status //订单状态
						this.data = res.data //订单状态
						// (新)车辆图片
						this.carImg = [];
						if(Array.isArray(res.data.images)){
							var temp =  img_text.data.map((v,i)=>{
								return res.data.images[i] ? [{url:res.data.images[i], name: v}] : null;
							});
							this.carImg = temp.filter((v)=>{
								return v !== null;
							})
						}
						
						if(this.status == 2){
							let time = res.data.end_time
							let arr= []
							if(time){
								arr = time.split('-');
								this.year = arr[0]
								this.moth = arr[1]
								this.day = arr[2]
							}
							
						}
						
						
						var list = res.data.banner
						var arr = []
						if (list) {
							for (let i = 0; i < list.length; i++) {
								var listimgs = {
									url: ''
								}
								listimgs.url = list[i]
								arr.push(listimgs)
							}
						}

						this.banner = arr
						this.title = res.data.service_name + "-结果"
					}
				})
			},
			init() {
				var json = {
					oid: this.oid,
					checkid: this.checkid
				}
				this.$http.post(this.$config.UrlPostcheckList, json).then((res) => {
					if (res.status == 1) {
						var list = res.data
						for (let i = 0; i < list.length; i++) {
							for (let j = 0; j < list[i].list.length; j++) {
								var arr = []
								if (list[i].list[j].fault_imgs) {
									var imgs = list[i].list[j].fault_imgs
									for (let k = 0; k < imgs.length; k++) {
										var listimgs = {
											url: ''
										}
										listimgs.url = imgs[k]
										arr.push(listimgs)
									}
								}
								list[i].list[j].fault_imgs = arr
							}

						}
						this.list = list
					}
				})
			},
			zhanshi(e) {
				if (e.show) {
					this.forLength = 40
				} else {
					this.forLength = 14
				}

			},
			godakai(index1, index,is_fault) {
				if(is_fault == 1){
					this.checkid = this.list[index1].list[index].id
					this.list[index1].list[index].show = !this.list[index1].list[index].show
					// var list = this.list[index1].list
					// for (let i = 0; i < list.length; i++) {
					// 	if (i != index) {
					// 		this.list[index1].list[i].show = false
					// 	}
					// }
				}
				
			},
			xuanxiang_title(item) {
				return item.name + "-" + item.z_abnormal_num + '项' + "--异常" + item.yc_abnormal_num + '项';
			},
			gojcbz(type) {
				this.popupShow = !this.popupShow
				if(type == 1){
					this.popupTitle = '事故车检测标准'
					this.popupContent = this.data.shigu
				}else if(type == 2){
					this.popupTitle = '水泡车检测标准'
					this.popupContent = this.data.shuipao
				}else{
					this.popupTitle = '火烧车检测标准'
					this.popupContent = this.data.huoshao
				}
			}
		}
	}
</script>

<style>
	page {
		background: #FFFFFF;
		color: #333333;
	}

	.none {
		display: none;
	}
</style>
